<template>
  <div id="app" ref="app">
    <router-view></router-view>
    <svg style="display: none">
      <filter id="colorMeMatrixRed">
        <feColorMatrix
          in="SourceGraphic"
          type="matrix"
          values="
            0.24 0.24 0.24 0.325 0
            0.05 0.05 0.05 0.2178 0
            0.04 0.04 0.04 0.174 0
			      0 0 0 1 0
         "
        />
      </filter>
      <filter id="colorMeMatrixBlue">
        <feColorMatrix
          in="SourceGraphic"
          type="matrix"
          values="
            0.05 0.05 0.05 0.218 0
            0.1 0.1 0.1 0.280 0
			      0.2 0.2 0.2 0.346 0
			      0 0 0 1 0
          "
        />
      </filter>
    </svg>
  </div>
</template>

<script>
import DevicePixelRatio from "./utils/devicePixelRatio";

export default {
  name: "App",
  data() {
    return {
      lastTime: new Date().getTime(),
      currentTime: new Date().getTime(),
      timeOut: 900000, //设置超时时间： 15分
      msg: null,
    };
  },
  created() {
    new DevicePixelRatio().init();
    // document.onmouseover = (e) => {
    //   this.lastTime = new Date().getTime();
    // };
    // window.setInterval(this.toLoginPage, 1000);
  },
  mounted() {
    let x = document.body.offsetWidth / 1920;
    let y = document.body.offsetHeight / 1080;
    console.log();
    if (document.body.offsetWidth > 1920) {
      this.$refs["app"].style =
        "  max-width: 1920px;max-height: 1080px;transform:scale(" +
        x +
        "," +
        y +
        ");-moz-transform:scale(" +
        x +
        "," +
        y +
        ");-webkit-transform:scale(" +
        x +
        "," +
        y +
        ");-o-transform:scale(" +
        x +
        "," +
        y +
        ") ;transform-origin: 0 0;";
    }
  },
  methods: {
    toLoginPage() {
      this.currentTime = new Date().getTime(); //更新当前时间
      if (this.currentTime - this.lastTime > this.timeOut) {
        let login = localStorage.getItem("login");
        if (login != "") {
          this.msg = this.$message({
            message: "15分钟内无操作，已自动退出登录",
            type: "warning",
            showClose: true,
            duration: 0,
          });
          localStorage.setItem("login", "");
          this.$store.commit("setFlag", 0);
          if (this.$route.name != "home") {
            this.$router.replace({ path: "/" });
          }
        }
      }
      if (this.msg != null && this.$route.name != "home") {
        this.msg.close();
      }
    },
  },
};
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#app {
  /* width: 1920px; */
  height: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* min-width: 1340px; */
}
.app-body {
  height: calc(100% - 120px);
}
.rel-node-checked {
  -moz-transform: none !important;
}
.img111:hover,
.img222:hover {
  cursor: pointer;
}

/* 修改图片滤镜 */
.img111:hover img {
  filter: url(#colorMeMatrixBlue);
}
.img111:hover span.s {
  color: #5889dc;
}
.img222:hover img {
  filter: url(#colorMeMatrixRed);
}
.img222:hover span.d {
  color: #f15847;
}
.page-bottom-pagination {
  width: 100%;
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
